AJAX (Asynchronous JavaScript and XML) প্রযুক্তিতে XMLHttpRequest (XHR) একটি মূল উপাদান, যা ব্রাউজার এবং সার্ভারের মধ্যে ডেটা আদান-প্রদানের জন্য ব্যবহৃত হয়। এটি ওয়েব পেজ রিলোড ছাড়াই ডেটা লোড করা, সার্ভারের রিসোর্স থেকে ডেটা রিকোয়েস্ট করা, এবং সার্ভারে ডেটা পাঠানোর সুযোগ দেয়।
XMLHttpRequest এর কাজের পদ্ধতিXMLHttpRequest অবজেক্ট তৈরি করা হয়।open() মেথডের মাধ্যমে HTTP মেথড এবং ইউআরএল নির্ধারণ করা হয়।send() মেথড ব্যবহার করে রিকোয়েস্ট সার্ভারে পাঠানো হয়।onreadystatechange ইভেন্ট বা load ইভেন্ট ব্যবহার করা হয়।XMLHttpRequest তৈরি এবং ব্যবহার// XMLHttpRequest তৈরি
const xhr = new XMLHttpRequest();
// সার্ভারের সাথে সংযোগ স্থাপন
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts', true);
// রেসপন্স হ্যান্ডল করা
xhr.onload = function () {
if (xhr.status === 200) {
const data = JSON.parse(xhr.responseText);
console.log(data); // ডেটা কনসোলে প্রদর্শিত হবে
} else {
console.error(`Error: ${xhr.status}`);
}
};
// রিকোয়েস্ট পাঠানো
xhr.send();
open(method, url, async):GET, POST, ইত্যাদি) নির্ধারণ করা হয়।url: সার্ভারের রিকোয়েস্ট ইউআরএল।async: রিকোয়েস্ট অ্যাসিনক্রোনাস হলে true (ডিফল্ট), সিঙ্ক্রোনাস হলে false।onload ইভেন্ট:status এবং responseText ব্যবহার করে রেসপন্স প্রক্রিয়া করা হয়।send():// XMLHttpRequest তৈরি
const xhr = new XMLHttpRequest();
// POST রিকোয়েস্ট কনফিগার করা
xhr.open('POST', 'https://jsonplaceholder.typicode.com/posts', true);
xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
// রেসপন্স হ্যান্ডল করা
xhr.onload = function () {
if (xhr.status === 201) {
const data = JSON.parse(xhr.responseText);
console.log(data); // ডেটা কনসোলে প্রদর্শিত হবে
} else {
console.error(`Error: ${xhr.status}`);
}
};
// রিকোয়েস্ট পাঠানো
const newPost = {
title: 'AJAX Example',
body: 'This is an example of POST request using XMLHttpRequest.',
userId: 1
};
xhr.send(JSON.stringify(newPost));
setRequestHeader():Content-Type JSON নির্ধারণ করা হয়েছে।send(data):XMLHttpRequest এর বিভিন্ন ইভেন্টonreadystatechangeএই ইভেন্টটি প্রতিবার readyState পরিবর্তন হলে ট্রিগার হয়। readyState পাঁচটি ধাপে পরিবর্তিত হতে পারে:
0: UNSENT – রিকোয়েস্ট তৈরি হয়েছে, কিন্তু এখনও পাঠানো হয়নি।1: OPENED – open() মেথড কল করা হয়েছে।2: HEADERS_RECEIVED – সার্ভার থেকে হেডার রিসিভ করা হয়েছে।3: LOADING – ডেটা লোড হচ্ছে।4: DONE – পুরো ডেটা লোড হয়ে গেছে এবং রেসপন্স প্রস্তুত।xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(JSON.parse(xhr.responseText));
}
};
onloadonload সরাসরি readyState এর DONE অবস্থায় ট্রিগার হয় এবং রেসপন্স প্রক্রিয়া করতে সহজ।
xhr.onload = function () {
if (xhr.status === 200) {
console.log(JSON.parse(xhr.responseText));
}
};
onerrorযদি রিকোয়েস্টে কোনো ত্রুটি ঘটে, তবে onerror ইভেন্ট ট্রিগার হয়।
xhr.onerror = function () {
console.error('Request failed.');
};
XMLHttpRequest এর সুবিধাXMLHttpRequest সমর্থন করে।XMLHttpRequest এর সীমাবদ্ধতাXMLHttpRequest একটু বেশি জটিল হতে পারে।Fetch API হলো XMLHttpRequest এর একটি উন্নত বিকল্প, যা প্রমিস (Promise) ভিত্তিক এবং আরও সহজ। উদাহরণ:
fetch('https://jsonplaceholder.typicode.com/posts')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
XMLHttpRequest AJAX রিকোয়েস্ট পরিচালনার একটি শক্তিশালী উপায়, যা ব্রাউজার এবং সার্ভারের মধ্যে ডেটা লোড এবং আদান-প্রদানের সুযোগ দেয়। যদিও Fetch API এবং অন্যান্য আধুনিক বিকল্পগুলো সহজ এবং উন্নত, XMLHttpRequest এখনো ওয়েব ডেভেলপমেন্টে একটি গুরুত্বপূর্ণ ভূমিকা পালন করে। ডেভেলপারদের এটি শেখা এবং এর কার্যকারিতা বোঝা গুরুত্বপূর্ণ।
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
